<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn">hello</button>
    <div id="dv"></div>
    <script>
        // 需求：点击按钮，改变多个样式的属性值
        // 和单属性不同，有多个属性名和值，以对象传入属性键值对改变
        function $(obj) {
            return document.querySelector(obj);
        }
        // 数据接收
        function ChangeStyle(btnObj,divObj,json) {
            this.btnObj = btnObj;
            this.divObj = divObj;
            this.json = json;
        }
        // 添加共享程序
        ChangeStyle.prototype.init = function () {
            var that = this;
            this.btnObj.onclick = function () {
                for(var attr in that.json) {
                    that.divObj.style[attr] = that.json[attr];
                }
            }
        }
        实例化，传输数据
        var cs = new ChangeStyle($('#btn'),$('#dv'),{
            width: '200px',
            height: '200px',
            backgroundColor: 'red',
        });
        cs.init();
        // 调用初始化
    </script>
</body>
</html>